<template>
  <div class="cart-list">
    <scroll class="content" ref="scroll">
      <cart-list-item v-for="(item, i) in cartList" :key="i" :product="item" />
      <div class="cart-null" v-show="isShow()">
        <img src="~assets/img/cart/cart.webp" />
        <h2>当前购物车为空！</h2>
        <h2>请快速前往购物！</h2>
      </div>
    </scroll>
  </div>
</template>
<script>
import CartListItem from "./CartListItem";
import Scroll from "components/common/scroll/Scroll";

import { mapGetters } from "vuex";

export default {
  name: "CartList",
  components: {
    Scroll,
    CartListItem,
  },
  computed: {
    // 将store的getter映射到局部计算属性
    ...mapGetters(["cartList"]),
  },
  // 处于活跃的时候刷新一下，防止scroll不能滚动
  activated() {
    this.$refs.scroll.refresh();
  },
  methods: {
    isShow() {
      if (this.cartList.length === 0) return true;
      return false;
    },
  },
};
</script>

<style scoped>
.cart-list {
  height: calc(100% - 44px - 49px - 41px);
}
.content {
  height: 100%;
  overflow: hidden;
  /* position: relative;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 49px; */
}
.cart-null img {
  width: 100%;
}
.cart-null h2 {
  margin-top: 20px;
  text-align: center;
  color: #f85b5b;
}
</style>